<template>
	<view class="nav-container">
		<!-- 状态栏占位盒子 -->
		<view :style="{ height: `${statusHeight}px` }"></view>

		<!-- 胶囊按钮栏占位盒子 -->
		<view :style="{ height: `${menuButtonHeight}px` }"></view>

		<!-- 标题栏区域 -->
		<view class="nav-body" :style="{ top: `${statusHeight}px` }">
			<view class="nav-content" :style="{ height: `${menuButtonHeight}px` }">
				<!-- 左侧插槽 -->
				<slot name="left">
					<view v-if="showLeft" class="nav-button-box" @click="handleLeft">
						<uni-icons type="home" size="22" color="#333" />
					</view>
				</slot>

				<!-- 中间标题 -->
				<view class="nav-title">
					<text>{{ title }}</text>
				</view>

				<!-- 右侧插槽 -->
				<slot name="right">
					<view
						v-if="showRight"
						class="nav-button-box"
						:style="{ paddingRight: buttonWidth }"
						@click="handleRight"
					>
						<uni-icons type="bars" size="22" color="#333" />
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script setup>
/**
	AppNav 头部导航栏组件用法示例：

	1. 基本用法（只显示标题）：
		<custom-app-nav title="首页" show-left show-right />

	2. 绑定事件：
		<custom-app-nav title="首页" @left="handleLeft" />

	5. 自定义左侧、右侧内容（通过插槽）：
		<custom-app-nav title="首页"
			@left="handleLeft"
			@right="handleRight">
			<template #left>
				<uni-icons type="left" size="22" />
			</template>
			<template #right>
				<uni-icons type="bars" size="22" />
			</template>
		</custom-app-nav>
	*/

import {
	useStatusHeight,
	useMenuButtonHeight,
	useMenuButtonStyle
} from "@/utils/useStyle"

// 定义 props
const props = defineProps({
	title: {
		type: String,
		default: ""
	},
	// 显示默认左边slot
	showRight: {
		type: Boolean,
		default: false
	},
	// 显示默认右边slot
	showLeft: {
		type: Boolean,
		default: false
	}
})

// 定义 emits
const emit = defineEmits(["back", "home", "right"])

const statusHeight = useStatusHeight()
// 头部总高度
const menuButtonHeight = useMenuButtonHeight()
// 胶囊按钮样式
const { buttonWidth } = useMenuButtonStyle()

// 方法
const handleLeft = () => {
	emit("left")
}

const handleRight = () => {
	emit("right")
}
</script>

<style lang="scss" scoped>
.nav-container {
	.nav-body {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #ffffff;
		border-bottom: 1px solid #eee;

		.nav-content {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;

			.nav-button-box {
				height: 100%;
				display: flex;
				align-items: center;
			}

			.nav-title {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				flex: 1;
			}
		}
	}
}
</style>
